<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import {
  ElRow,
  ElCol,
  ElCard,
  ElSkeleton,
  ElTable,
  ElTableColumn,
  ElDatePicker
} from 'element-plus'
import { CountTo } from '@/components/CountTo'
import { Echart } from '@/components/Echart'
import { EChartsOption } from 'echarts'
import { Icon } from '@/components/Icon'
import { useDesign } from '@/hooks/web/useDesign'
import { RetrieveUserCount, RetrieveUserActivation } from '@/api/sysmanage/overview'
import { formatToDate } from '@/utils/dateUtil'
import { TableDataType } from './types/overview'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('panel')

const userPieOption = reactive<EChartsOption>({
  title: { text: '用户数量', left: 'center' },
  tooltip: { trigger: 'item' },
  legend: { bottom: 0 },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      }
    }
  ]
}) as EChartsOption
const loginLineOption = reactive<EChartsOption>({
  title: { text: '每日活跃用户量', left: 'center' },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: { alignWithLabel: true }
    }
  ],
  yAxis: { type: 'value' },
  series: [
    {
      name: '数量',
      type: 'line',
      symbol: 'none',
      data: []
    }
  ]
}) as EChartsOption
const loadingData = reactive({
  pieOptLoading: false,
  lineOptLoading: false,
  tableLoading: false
})

const tableData = reactive<TableDataType>({
  qDate: formatToDate(new Date()),
  rowData: []
})

const panelData = reactive([
  {
    id: 1,
    name: '总用户数',
    icon: 'svg-icon:peoples',
    color: 'peoples',
    value: 0
  },
  {
    id: 2,
    name: '今日活跃数',
    icon: 'svg-icon:sun',
    color: 'sun',
    value: 0
  }
])

const getUserActive = () => {
  RetrieveUserActivation(tableData.qDate).then((res) => {
    tableData.rowData = res.data.records
  })
}

onMounted(() => {
  loadingData.pieOptLoading = true
  loadingData.lineOptLoading = true
  RetrieveUserCount().then((res) => {
    let userCount: number = 0
    let pieData: Array<{ name: string; value: number }> = []
    const counts = res.data.type_counts
    for (let i = 0; i < counts.length; i++) {
      userCount += counts[i].total
      pieData.push({
        name: counts[i].ut_name,
        value: counts[i].total
      })
    }
    panelData[0].value = userCount
    panelData[1].value = res.data.today_count
    if (userPieOption.series) {
      userPieOption.series[0].data = pieData
    }
    // 折线图
    const date_counts = res.data.date_counts
    if (!loginLineOption.xAxis || !loginLineOption.series) {
      return
    }
    loginLineOption.xAxis[0].data = date_counts.map((item: any) => item.login_date)
    loginLineOption.series[0].data = date_counts.map((item: any) => item.total)
    // console.log(res)
    loadingData.pieOptLoading = false
    loadingData.lineOptLoading = false
  })

  getUserActive()
})
</script>
<template>
  <div>
    <ElRow :gutter="20" justify="start" :class="prefixCls">
      <ElCol :xl="12" :lg="12" :md="12" :sm="24" :xs="24" v-for="p in panelData" :key="p.id">
        <ElCard shadow="hover" class="mb-20px">
          <div :class="`${prefixCls}__item flex justify-between`">
            <div>
              <div
                :class="`${prefixCls}__item--icon ${prefixCls}__item--${p.color} p-16px inline-block rounded-6px`"
              >
                <Icon :icon="p.icon" :size="40" />
              </div>
            </div>
            <div class="flex flex-col justify-between">
              <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">
                {{ p.name }}
              </div>
              <CountTo
                class="text-20px font-700 text-right"
                :start-val="0"
                :end-val="p.value"
                :duration="1500"
              />
            </div>
          </div>
        </ElCard>
      </ElCol>
    </ElRow>
    <ElRow :gutter="20" justify="start">
      <ElCol :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
        <ElCard shadow="hover" class="mb-20px">
          <ElSkeleton :loading="loadingData.pieOptLoading" animated>
            <Echart :options="userPieOption" :height="280" />
          </ElSkeleton>
        </ElCard>
      </ElCol>
      <ElCol :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
        <ElCard shadow="hover" class="mb-20px">
          <ElSkeleton :loading="loadingData.lineOptLoading" animated>
            <Echart :options="loginLineOption" :height="280" />
          </ElSkeleton>
        </ElCard>
      </ElCol>
    </ElRow>
    <ElRow :gutter="20" justify="start">
      <ElCol :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <ElCard shadow="hover" class="mb-20px">
          <template #header>
            <div class="active-box">
              <div class="box-name">用户活跃记录</div>
              <div class="date-selector">
                <ElDatePicker
                  v-model="tableData.qDate"
                  size="small"
                  value-format="YYYY-MM-DD"
                  :clearable="false"
                  @change="getUserActive"
                />
              </div>
            </div>
          </template>
          <ElSkeleton :loading="loadingData.lineOptLoading" animated>
            <ElTable stripe :data="tableData.rowData">
              <ElTableColumn prop="create_time" label="时间" width="170" />
              <ElTableColumn prop="ssn" label="用户号" width="150" />
              <ElTableColumn prop="username" label="用户名" width="100" />
              <ElTableColumn prop="description" label="描述" />
              <ElTableColumn prop="ut_name" label="类型" width="100" />
              <ElTableColumn prop="remain" label="活跃值" width="100" />
              <ElTableColumn prop="probation_expire" label="到期日" width="120" />
            </ElTable>
          </ElSkeleton>
        </ElCard>
      </ElCol>
    </ElRow>
  </div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-panel';
.active-box {
  display: flex;
  align-items: center;
  .box-name {
    font-weight: 600;
  }
  .date-selector {
    margin-left: auto;
  }
}

.@{prefix-cls} {
  &__item {
    &--peoples {
      color: #40c9c6;
    }

    &--database {
      color: #36a3f7;
    }

    &--sun {
      color: #f4516c;
    }

    &--shopping {
      color: #34bfa3;
    }

    &:hover {
      :deep(.@{namespace}-icon) {
        color: #fff !important;
      }
      .@{prefix-cls}__item--icon {
        transition: all 0.38s ease-out;
      }
      .@{prefix-cls}__item--peoples {
        background: #40c9c6;
      }
      .@{prefix-cls}__item--database {
        background: #36a3f7;
      }
      .@{prefix-cls}__item--sun {
        background: #f4516c;
      }
      .@{prefix-cls}__item--shopping {
        background: #34bfa3;
      }
    }
  }
}
</style>
